import { Component, NgModule } from '@angular/core';

// 引入Router模块， 使用NavigationExtras模块进行get传参
import { Router, NavigationExtras } from '@angular/router'

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'my-app';
  msg = '你好，子组件';
  items = ['item1', 'item2', 'item3', 'item4'];
  power = 5;
  factor = 1;
  heroes: any[] = [];
  birthday = new Date(1988, 3, 15);
  toggle = true;
  canFly = true;
  submitMessage: '';
  isSpecial = true;
  currentClasses: {};
  currentStyles: {};
  canSave = true;
  isUnchanged = true;
  currentItem = {
    name: 'ajax'
  };
  items2 = [
    { name: 'zs', id: 1 },
    { name: 'ls', id: 2 },
    { name: 'ww', id: 3 }
  ];
  color: string;
  condition: false;


  constructor(
    private router: Router
  ) {
    this.reset();
    this.setCurrentClasses();
    this.setCurrentStyles();
  }

  // js跳转普通路由
  goHome() {
    this.router.navigate(['/home'])
  }

  // js跳转动态路由
  goToPath() {
    // 路由跳转 适合普通路由和动态路由
    this.router.navigate(['/first-component/', '123'])
  }

  // js跳转路由query传参 (get传值)
  queryRoute() {
    let queryParams: NavigationExtras = {
      queryParams: {
        name: '王者荣耀'
      }
    }

    this.router.navigate(['/second-component'], queryParams);
  }




  get format() {
    return this.toggle ? 'shortDate' : 'fullDate';
  }

  toggleFormat() {
    this.toggle = !this.toggle;
  }

  addHero(name: string) {
    console.log(name);
    name = name.trim();
    if (!name) {
      return;
    }
    const hero = { name, canFly: this.canFly };
    this.heroes.push(hero);
  }

  reset() {
    console.log('reset');
    this.heroes = [];
  }

  addItem(newItem: string) {
    this.items.push(newItem);
  }

  onSave(e, msg) {
    console.log(e);
    console.log(msg)
  }

  callPhone(val) {
    console.log(val)
  }

  log(ref) {
    console.log(ref)
  }

  onSubmit(val) {
    console.log(val);
    this.submitMessage = val.form.value.name;
  }

  setCurrentClasses() {
    // CSS classes: added/removed per current state of component properties
    this.currentClasses = {
      saveable: this.canSave,
      modified: !this.isUnchanged,
      special: this.isSpecial
    };
  }

  setCurrentStyles() {
    // CSS styles: set per current state of component properties
    this.currentStyles = {
      'font-style': this.canSave ? 'italic' : 'normal',
      'font-weight': !this.isUnchanged ? 'bold' : 'normal',
      'font-size': this.isSpecial ? '24px' : '12px'
    };
  }

  changeClass(val: string) {
    console.log(val);
    this.isUnchanged = !this.isUnchanged;
    this.setCurrentClasses();
  }

  setUppercaseName(e) {
    this.currentItem.name = e.toLocaleUpperCase();
  }

  isActive = true;

  changeState() {
    this.isActive = !this.isActive;
  }

  nullCustomer = null;

  trackByItems(index: number, item: any): number {
    return item.id;
  }
}
